<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
		<title>选择支付方式</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<style type="text/css">
			.content {
				padding: 0.75rem 0.75rem 0.75rem 0.75rem;
			}

			.list-content {
				padding: 0 0.5rem;
				background-color: #FFFFFF;
			}

			.list-item {
				height: 2.5rem;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				-webkit-flex-direction: row;
				flex-direction: row;
				justify-content: space-between;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
			}

			.list-item .pay-icon {
				width: 2.1rem;
			}

			.list-item .pay-channel {
				flex: 1;
				font-size: 0.8rem;
				margin-left: 0.4rem;
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(16,29,55,1);
			}

			.list-item .pay-icon-select {
				width: 1rem;
			}

			.aui-btn-block {
				height: 2rem;
				line-height: 2rem;
				width: 17.25rem;
				color: #FFFFFF;
				/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
				/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
				background:linear-gradient(135deg,rgba(132,229,255,1) 0%,rgba(107,180,255,1) 100%,rgba(122,174,229,1) 100%);
				border-radius:1.25rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(255,255,255,1);
			}

			.btn-frame {
				margin: 2.5rem 0.5rem 0rem 0.5rem;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak="">
			<div class="content ming-bg-white aui-text-left" style="border-bottom:0.5rem solid rgba(246,246,246,1);">
				<div style="font-size:.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(51,51,51,1);">
					订单编号：{{order_num}}
				</div>
				<div class="">
					<span style="font-size:.7rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(51,51,51,1);">需付金额：￥<span class="" style="font-size:1.3rem;font-family:Akrobat-Bold;color:rgba(51,51,51,1);">{{pay_price}}</span></span>

				</div>
			</div>
			<div class="list-content">
				<!-- 微信支付 -->
				<div class="list-item aui-border-b" tapmode @click="channel='Wxpay'">
					<div class="">
						<img class="pay-icon" src="../../image/btn/btn-weixin1.png" style="width:1.5rem;">
					</div>
					<div class="pay-channel">
						微信支付

					</div>
					<div style="padding-right:.5rem;">
						<img v-if="channel=='Wxpay'" class="pay-icon-select" src="../../image/icon/select_new.png" style="width:.95rem;">
						<img v-if="channel!='Wxpay'" class="pay-icon-select" src="../../image/icon/icon-noselect-red.png" style="width:.95rem;">
					</div>
				</div>

				<!-- 支付宝支付 -->
				<div class="list-item aui-border-b" tapmode @click="channel='Alipay'">
					<div class="">
						<img class="pay-icon" src="../../image/btn/btn-alipay.png" style="width:1.5rem;">
					</div>
					<div class="pay-channel">
						支付宝
					</div>
					<div style="padding-right:.5rem;">
						<img v-if="channel=='Alipay'" class="pay-icon-select" src="../../image/icon/select_new.png" style="width:.95rem;">
						<img v-if="channel!='Alipay'" class="pay-icon-select" src="../../image/icon/icon-noselect-red.png"  style="width:.95rem;">
					</div>
				</div>

				<!-- 网银支付 -->
				<div class="list-item aui-border-b" tapmode @click="channel='UnionPay'">
					<div class="">
						<img class="pay-icon" src="../../image/btn/btn-yinlian.png" style="width:1.5rem;">
					</div>
					<div class="pay-channel">
						网银支付
					</div>
					<div style="padding-right:.5rem;">
						<img v-if="channel=='UnionPay'" class="pay-icon-select" src="../../image/icon/select_new.png" style="width:.95rem;">
						<img v-if="channel!='UnionPay'" class="pay-icon-select" src="../../image/icon/icon-noselect-red.png" style="width:.95rem;">
					</div>
				</div>

			</div>
			<!--<div class="btn-frame" tapmode onclick="open_win('pay','pay.html',false)">-->
			<div class="btn-frame" tapmode onclick="pay()">
				<div class="aui-btn aui-btn-block aui-font-size-16">
						确认
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				order_num: 0,
				pay_price: 0,
				channel: 'Alipay',
				order_id: 0
			},
			methods: {

			}
		})
		apiready = function() {
			vm.order_num = $api.getStorage('orderinfo').order_num
			vm.pay_price = $api.getStorage('orderinfo').pay_price
			vm.order_id = $api.getStorage('orderinfo').order_id
		};

		function pay() {
			var channel = vm.channel
			get_data('payment/Pay/getOrderSign', {
				order_id: vm.order_id,
				order_type: channel
			}, function(ret) {
				console.log(JSON.stringify(ret))
				if(ret.status) {
					if(ret.status == '99' && ret.msg == '订单处理成功') {
						pay_res(1);
						send_event('order_chang')
						setTimeout(function() {
							close_win()
						}, 1000)
						return;
					}
					var orderinfo = ret.order;
					if(channel == 'Wxpay') {
						var wxPay = api.require('wxPayPlus');
						console.log(JSON.stringify(ret.data.payOrder))
						wxPay.payOrder(ret.data.payOrder, function(ret, err) {
							console.log(JSON.stringify(ret))
							if(ret.status) {
								pay_res(1)
								send_event('order_chang')
								setTimeout(function() {
									close_win()
								}, 1000)
							} else {
								if(err.code == '-2')
									pay_res(0)
								setTimeout(function() {
									close_win()
								}, 1000)
							}
						});
					}
					if(channel == 'Alipay') {
						var alipay = api.require('aliPayPlus');
						alipay.payOrder({
							orderInfo: ret.data.payOrder
						}, function(ret, err) {
							if(ret.code == '9000') {
								pay_res(1)
								send_event('order_chang')
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
							} else if(ret.code == '4006') {
								pay_res(0)
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
							} else if(ret.code == '4003') {
								pay_res(0)
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
								//								toast('您绑定的支付宝账户被冻结或不允许支付');
							} else if(ret.code == '6000') {
								pay_res(0)
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
								//								toast('支付服务正在进行升级操作');
							} else if(ret.code == '6001') {
								pay_res(0)
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
								//								toast('您已取消付款');
							}
						});
					}
					if(channel == 'UnionPay') {
						var unPay = api.require('unionPay');
						unPay.pay({
							tn: ret.data.tn,
							devMode: false
						}, function(ret, err) {
							if (ret.result=='success') {
								pay_res(1)
								send_event('order_chang')
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
							}else{
								pay_res(0)
								if(api.systemType != 'android'){
									close_win()
								}
								setTimeout(function() {
									close_win()
								}, 1000)
							}
						});
					}
				}
			})
		}

		function pay_res(res, orderinfo) {
			send_event('tuan_ref')
			$api.setStorage('pay_res', res)
			open_win('pay', 'pay.html', false)
		}
	</script>

</html>
